iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1
自我挑戰組

愛寫什麼就寫什麼,開心最重要系列 第 8

Day8-Alpine.js之x-for迴圈跑數字

  • 分享至 

  • xImage
  •  

繼昨天的字串for迴圈後,希望大家對x-for有基本的了解了。
接著今天要將數字帶入迴圈,請看下面範例:

認識for裡面的index

<div x-data="{items:['a','b','c','d']}">
    <template x-for="(item, index) in items" :key="index">
        <!-- 如果你需要的話,也可以在疊代的內部使用「index」-->
        <div><span x-text="index"></span><span x-text="item"></span></div>
    </template>
</div>

這個範例最主要提的是x-for="(item, index) in items"
index值會從0(跑第1次)開始跑,
直到跑完迴圈(這個範例會跑到3),
方便在於這個迴圈中每個資料都會自動帶入不同的index值,
讓我們在使用上會變得非常方便!
像是這邊我在同一行列出indexitem
那若是希望數字從1開始列當然也可以,
直接將x-text="index"改為x-text="index+1"他也會計算喔(因為是數字)。

依序列出的數字

<div x-data>
    <template x-for="i in 10" :key="i">
        <span x-text="i"></span>
    </template>
</div>

這個範例他沒有給任何預設值,
那麼他就會從數字1開始,
所以,x-for="i in 10"在這就會從i=1一直跑到i=10,
<span x-text="i"></span>而這個列印放在template標籤內,
因此每跑一次都會印一個出來,
結果就會顯示出1到10的數字。

若是在x-data中預設x-data="{i:3}"
i就會一直是3直到迴圈結束,
就是會印出10個3的意思。

點擊改變的數字

<div x-data="{ count: 10 }">
    <template x-for="i in count" :key="i">
        <span x-text="i"></span>
    </template>
    <button type="button" @click="count++">Increment count</button>
</div>

在這有兩個變數,分別為i和count,
這邊與上個範例非常相似,
將原本的10用變數count取代,
x-data="{ count: 10 }"預設count為10,
首先進到頁面時for迴圈會先跑完,列出1到10的數字,
旁邊還有一個button,
而這個button裡面寫了@click="count++"
意思同count=count+1,點一下count會10+1=11的意思,
那麼迴圈的count原先只跑到10,
現在count增為11,迴圈還是會繼續跑到count結束,
所以,count不斷的增加,
count後面加上去的數字也是會繼續被印出來的,很神奇吧!


上一篇
Day7-Alpine.js進入x-for迴圈吧!
下一篇
Day9-Alpine.js之把js資料丟進html
系列文
愛寫什麼就寫什麼,開心最重要30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言